<template>
  <div class="zhiboxiaoshou_shangpin">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <el-breadcrumb separator="/" style="margin-top: 20px;">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/xiaochengxu' }">小程序</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/xiaochengxu/xcxstorelist',query: {app_id:this.$route.query.app_id,xcxtype:this.$route.query.xcxtype} }">店铺列表</el-breadcrumb-item>
            <el-breadcrumb-item>小程序商品管理</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="flex" style="margin-top: 30px;justify-content:space-between;">
            <div style="font-size:20px;font-weight:bold;margin-left:20px">小程序商品管理</div>
            <el-button style="background:#F72C50; border-radius: 10px;border:none;color:white;margin-right:20px" @click="tianjia()">添加商品</el-button>
            <!-- <el-button type="danger" size="medium" @click="tianjia2()">添加多商品</el-button> -->
          </div>
          <!-- <el-tabs v-model="all.on_sale" type="card" @tab-click="getlist2" style="margin-top: 20px;">
              <el-tab-pane label="上架中" name="0"></el-tab-pane>
              <el-tab-pane label="已下架" name="-100"></el-tab-pane>
          </el-tabs> -->
          <div class="flex up_and_down">
              <div @click="getlist2(0)" :class="all.on_sale === 0 ? 'tabsClick' : 'tabsNoClick'" style="width:100px;height:40px;text-align:center;line-height:40px">上架中</div>
              <div @click="getlist2(-100)" :class="all.on_sale === -100 ? 'tabsClick' : 'tabsNoClick'" style="width:100px;height:40px;text-align:center;line-height:40px">已下架</div>
          </div>
          <div class="zhiboxitong_table">
            <el-table :data="list" border style="width: 100%" align="center" 
              :header-cell-style="{fontSize: '14px', backgroundColor: 'rgba(246,247,252,0.9)' }"
            :cell-style="{fontSize: '14px', backgroundColor: 'rgba(246,247,252,0.9)' }"
            >
              <el-table-column prop='id' label="ID" align="left"></el-table-column>
              <el-table-column prop='sale_name' label="商品名称" align="left"></el-table-column>
              <el-table-column prop='pv' label="PV" align="left"></el-table-column>
              <el-table-column prop='uv' label="UV" align="left"> </el-table-column>
              <el-table-column prop='saled' label="今日销售" align="left"> </el-table-column>
              <el-table-column prop='cat_names' label="分类" align="left"> 
                <template slot-scope="scope">
                        <el-select v-model="scope.row.cat_id" multiple collapse-tags clearable placeholder="分类" @change="changefenlei(scope.row)">
                          <el-option v-for="item in shangpinfenlei" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                      </template>
              </el-table-column>
              <el-table-column prop='order' label="排序" align="left">
                <template slot-scope="scope">
                        <div  >{{ scope.row.order }}<i @click="changeorder(scope.row)"
                          style="cursor: pointer;margin-left: 10px;" class="el-icon-edit"></i></div>
                      </template>
                </el-table-column>
              <el-table-column label="操作" width="180px" align="left">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="bianji(scope.row.id,'duo')" v-if="scope.row.page_id == 0" style="color:#335DFF;border:none;font-size:14px">编辑</el-button>
                  <el-button size="mini" type="text" @click="bianji(scope.row.id)" v-if="scope.row.page_id != 0" style="color:#335DFF;border:none;font-size:14px">编辑</el-button>
                  <el-button size="mini" type="text" @click="shanchu(scope.row.id)" style="color:#335DFF;border:none;font-size:14px">删除</el-button>

                  <el-button size="mini" type="text" v-if="scope.row.on_sale == 0" @click="shangxiajia(scope.row,-100)" style="color:#335DFF;border:none;font-size:14px">下架</el-button>
                  <el-button size="mini" type="text" v-if="scope.row.on_sale == -100" @click="shangxiajia(scope.row,0)" style="color:#335DFF;border:none;font-size:14px">上架</el-button>
              
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right; padding: 10px 0;">
              <el-pagination background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size"
               :total="total"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="根据已有直播页发布页面" :visible.sync="log" :close-on-click-modal="false" :close-on-press-escape="false" width="700px">
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
         <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="tongbugo">确认</el-button>
      </span>
    </el-dialog>
    <!-- 修改排序 -->
    <el-dialog
      :close-on-click-modal="false"
      title="修改排序"
      :visible.sync="isshowchangeorder"
      width="400px">
      <el-input v-model="noworder" type="number" placeholder="请输入排序"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="info" @click="isshowchangeorder = false">取 消</el-button>
        <el-button size="small" type="primary" @click="surechange">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  export default {
    components: {
      top,left
    },
    name: "zhiboxiaoshou_shangpin",
    data() {
      return {
          list:[],
          tongbuall:"",
          log:false,

          all:{
            page:1,
            page_size:20,
            tab:this.$route.query.id,
            on_sale:0
          },
          shopid:"",
          shangpinfenlei:[],
          isshowchangeorder:false,
          nowchoose:{},
          noworder:''
      }
    },
    created() {
      this.getlist()
      axios.get(`${this.apis}/api/account/shop/info`)
      	.then(response => {
          if (response.data.msg.code == 0) {
            this.shopid = response.data.data.shop_id
          
          }else{
            this.$message.error(response.data.msg.info);
          }
        })
      
      this.getshangpinfenlei()
    },
    mounted() {

    },
    methods: {
      shangxiajia:function(item,val){
        axios.post(`${this.apis}/api/page/sale/set`,{id:item.id,on_sale:val})
          .then(response => {
            if(response.data.msg.code == 0){
              this.getlist()
              this.$message.success('操作上下架成功');
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      shanchu:function(id){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`${this.apis}/api/page/delete`,{id:id})
            .then(response => {
              if(response.data.msg.code == 0){
                this.getlist()
                this.$message.success('已删除');
              }else{
                this.$message.error(response.data.msg.info);
              }
            });
        })
      },
      fanye:function(page){
        console.log(page)
        this.all.page = page
        this.getlist()
      },
      getlist2:function(val){
         this.all.on_sale = val
        this.all.page = 1
        this.getlist()
      },
      getlist:function(){
        axios.get(`${this.apis}/api/page/list`,{params:this.all})
          .then(response => {
            if(response.data.msg.code == 0){
              this.list = response.data.data.data
              if(this.list != ''){
                this.list.forEach(item=>{
                  if(item.cat_names != ''){
                    item.cat_names = item.cat_names.toString()
                  }
                  console.log(item.cat_names)
                })
              }
              this.total = response.data.data.total
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      tianjia2:function(){
        this.$router.push({
          path:"/zhiboxitong/meitituiguang/zhiboxiaoshou_shangpinfabuduo",
          query:{
            tab:this.$route.query.id
          }
        })
      },
      tianjia:function(){
        let name = this.$route.query.app_id
        if(name.startsWith('tt') || name.startsWith('2021004124652654') || name.startsWith('zfb20231215') || name.startsWith('wx')){
          var url = '/zhiboxitong/xiaochengxu/xiaochengxu_shangpinfabuxin'
        }else{
          var url = '/zhiboxitong/xiaochengxu/xiaochengxu_shangpinfabu'
        }
        this.$router.push({
          path:url,
          query:{
            tab:this.$route.query.id,
            app_id:this.$route.query.app_id,
            xcxtype:this.$route.query.xcxtype
          }
        })
      },
      bianji:function(id,val){
        if(val == 'duo'){
          var url = "/zhiboxitong/meitituiguang/zhiboxiaoshou_shangpinfabuduo"
        }else{
          let name = this.$route.query.app_id
          if(name.startsWith('tt') || name.startsWith('2021004124652654') || name.startsWith('zfb20231215') || name.startsWith('wx') ){
            var url = '/zhiboxitong/xiaochengxu/xiaochengxu_shangpinfabuxin'
          }else{
            var url = '/zhiboxitong/xiaochengxu/xiaochengxu_shangpinfabu'
          }
        }
        this.$router.push({
          path:url,
          query:{
            tab:this.$route.query.id,
            id:id,
            app_id:this.$route.query.app_id
          }
        })
      },
      getshangpinfenlei:function(){
        axios.get(`${this.apis}/api/catgory/list`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.shangpinfenlei = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });

        
      },
      changefenlei:function(e){
      console.log(e)
      axios
        .post(`${this.apis}/api/set/page/class`, { id:e.id,cat_id:e.cat_id })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('操作成功');
            this.getlist()
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    changeorder(row){
      this.nowchoose = row
      this.noworder = row.order
      this.isshowchangeorder = true
    },
    surechange(){
      if(this.noworder == ''){
        this.$message.error('请输入排序');
        return
      }
      axios
        .post(`${this.apis}/api/page/order/update`, { id:this.nowchoose.id,order:this.noworder })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.getlist();
            this.isshowchangeorder = false
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
      
    }

    }
  }
</script>

<style scoped lang="less">
/deep/ .el-table__header th{
&:first-child{
 }
}

// 划过改变table表格背景颜色
/deep/ .el-table__body tr:hover > td {
  background-color: white !important;
}
.jinggao_image{
  margin-right: 5px;
  width: 20px;
  height: 20px;
}
//去掉每行的下边框
  /deep/ .el-table td.el-table__cell,/deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
    border-right: none;
  } 
 
// 去掉表格单元格边框
.customer-table th{
    border:none;
  }
.customer-table td,.customer-table th.is-leaf {
  border:none;
}
// 表格最外边框
.el-table--border, .el-table--group{
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;
}
// 表格最外层边框-底部边框
.el-table--border::after, .el-table--group::after{
  width: 0;
}
.customer-table::before{
  width: 0;
}
.customer-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
// 表格有滚动时表格头边框
// .el-table--border th.gutter:last-of-type {
//     border: 1px solid #EBEEF5;  
//     border-left: none;
// }
// 去除边框线
/deep/ .el-table::before {
    height: 0;
}
      /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
  .zhiboxiaoshou_shangpin {
     .tabsClick{
  background: rgb(0, 90, 255); border-radius:10px; font-size: 16px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 250px; height: 50px; margin-right: 30px; line-height: 50px;}
 .tabsNoClick{font-size: 16px; text-align: center; font-weight: 500;height: 50px; margin-right: 30px; width: 200px; line-height: 50px;cursor: pointer;color:#335DFF}
    // background: #f2f2f2;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #FAFAFE;height: 100%;}
      .right{ width: calc(100vw - 220px);padding: 20px 0 0 20px;
                 height:100vh;
           overflow: auto;
        .zhiboxitong_right{

           border-radius: 5px; 
        }
        .zhiboxitong_table{ margin-top: 20px;padding: 30px;background: #FAFAFE;
          border-top-left-radius: 30px;
        
        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }
/deep/ .el-table{
  background-color: #F8F9FD;
}

// 划过改变table表格背景颜色
/deep/ .el-table__body tr:hover td {
  background-color: white !important;
}
/deep/ .el-table__body tr td:first-child {
  border-radius: 20px 0 0 20px;
   padding-left: 10px;
  box-sizing: border-box;
}
/deep/ .el-table__body tr td:last-child {
  border-radius: 0 20px 20px 0;
}
    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

  }
        /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
.up_and_down{
  margin-top: 30px;
  cursor: pointer;
  margin-left: 20px;
  width: 260px;
  justify-content: space-between;
  display: flex;
}

</style>
